<script setup lang="ts">

import {ref, watch} from "vue";
import dayjs from "dayjs";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  },
  isKey:{
    type:Boolean,
    default:false
  }
})

const left = ref(50)
const left1 = ref(50)

watch(()=>props.data,(v:any)=>{
  if(v.weight < v.weight_normal?.[0]){
    left.value = 25 - (v.weight_normal?.[0] - v.weight) < 0 ? 0 : 25 - (v.weight_normal?.[0] - v.weight)
  }else if(v.weight > v.weight_normal?.[1]){
    left.value = 67 + (v.weight - v.weight_normal?.[1]) > 100 ? 100 : 67 + (v.weight - v.weight_normal?.[1])
  }else{
    left.value = 25 + (v.weight - v.weight_normal?.[0]) >66 ? 66 : 25 + (v.weight - v.weight_normal?.[0])
  }
  if(v.bmi < v.bmi_normal?.[0]){
    left1.value = 25 - (v.bmi_normal?.[0] - v.bmi) < 0 ? 0 : 25 - (v.bmi_normal?.[0] - v.bmi)
  }else if(v.bmi > v.bmi_normal?.[1]){
    left1.value = 67 + (v.bmi - v.bmi_normal?.[1]) > 100 ? 100 : 67 + (v.bmi - v.bmi_normal?.[1])
  }else{
    left1.value = 25 + (v.bmi - v.bmi_normal?.[0]) >66 ? 66 : 25 + (v.bmi - v.bmi_normal?.[0])
  }
},{
  deep:true,
  immediate:true
})

</script>

<template>
  <div class="flex flex-col items-center mt-[38px]">
    <div class="w-[452px] h-[120px] bg flex items-center">
      <img src="@/assets/img/icon/img_touxiang.png" class="w-[80px] h-[80px] ml-[32px]">
      <div class="ml-[24px]">
        <div class="text-[#1A1A1A] text-[20px] font-bold">体测人</div>
        <div class="text-[#4D4D4D] text-[18px] mt-[10px] ff-DINAlternate-Bold">{{ data.age }}岁</div>
      </div>
      <div class="ml-[0]">
        <div class="text-[#1A1A1A] text-[20px] ml-[32px] flex items-center">
          <img v-if="data.sex == 0" src="@/assets/img/icon/ic_male.png" class="w-[14px] h-[14px] mr-[4px]">
          <img v-else src="@/assets/img/icon/ic_female.png" class="w-[14px] h-[14px] mr-[4px]">
          {{ data.sex == 0 ? '男' : '女' }}性</div>
        <div class="text-[#4D4D4D] text-[18px] mt-[10px] ff-DINAlternate-Bold">{{ data.height }}cm</div>
      </div>
      <div class="flex flex-col items-end ml-[20px] mt-[20px]">
        <div class="text-[#808080] text-[12px] flex items-center">
          数据更新时间</div>
        <div class="text-[#808080] text-[12px] mt-[5px] ff-DINAlternate-Bold">{{ dayjs(data.ctime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>
    </div>
    <div class="w-[452px] h-[64px] flex items-center justify-between pr-[20px] mt-[32px] bg1">
      <div class="flex items-center">
        <img class="w-[32px] h-[32px] ml-[12px]" src="@/assets/img/icon/ic_tizhong.png">
        <div class="text-[#808080] text-[20px] ml-[8px]">体重</div>
        <div class="text-[#1A1A1A] text-[18px] ml-[8px] mr-[4px] ff-DINAlternate-Bold">{{ data.weight }}kg</div>
        <img class="w-[6px] h-[12px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.weight > data.weight_normal?.[1]">
        <img class="w-[6px] h-[12px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.weight < data.weight_normal?.[0]">
<!--        <div class="text-[#FB2D19] text-[18px] ml-[0] font-bold" v-if="data.weight > data.weight_normal?.[1]">↑</div>-->
<!--        <div class="text-[#3786FD] text-[18px] ml-[0] font-bold" v-if="data.weight < data.weight_normal?.[0]">↓</div>-->
      </div>
      <div class="w-[223px] h-[6px] bg-[#ECECEC] rounded-[6px] flex relative justify-center ml-[10px] overflow-visible">
        <div class="w-[12px] h-[12px] rounded-[12px] border-[#09CDD5] border-[3px] bg-[#fff] absolute top-[-3px]" :style="{
          borderColor: data.weight < data.weight_normal?.[0] ? '#3786FD' : data.weight > data.weight_normal?.[1] ? '#FB2D19' : '#09CDD5',
          left: `${left}%`
        }"></div>
        <div class="w-[94px] h-[6px] bg-[#09CDD5] overflow-visible">
          <div style="transform: translateY(-15px)" class="overflow-visible flex justify-between">
            <div class="text-[#808080] text-[12px] overflow-visible ml-[-10px]">{{ data.weight_normal?.[0] }}</div>
            <div class="text-[#808080] text-[12px] overflow-visible mr-[-10px]">{{ data.weight_normal?.[1] }}</div>
          </div>
          <div class="text-[#09CDD5] text-[12px] mt-[-10px] ml-[26px]">理想体重</div>
        </div>
      </div>
    </div>
    <div class="w-[452px] h-[64px] flex items-center justify-between pr-[20px] mt-[32px] bg1">
      <div class="flex items-center">
        <img class="w-[32px] h-[32px] ml-[12px]" src="@/assets/img/icon/ic_tizhi.png">
        <div class="text-[#808080] text-[20px] ml-[8px]">体质</div>
        <div class="text-[#1A1A1A] text-[18px] ml-[8px] mr-[4px] ff-DINAlternate-Bold">{{ data.bmi }}BMI</div>
        <img class="w-[6px] h-[12px]" src="@/assets/img/icon/ic_shangjiantou.png" v-if="data.bmi > data.bmi_normal?.[1]">
        <img class="w-[6px] h-[12px]" src="@/assets/img/icon/ic_xiajiantou.png" v-if="data.bmi < data.bmi_normal?.[0]">
<!--        <div class="text-[#FB2D19] text-[18px] ml-[0] font-bold" v-if="data.bmi > data.bmi_normal?.[1]">↑</div>-->
<!--        <div class="text-[#3786FD] text-[18px] ml-[0] font-bold" v-if="data.bmi < data.bmi_normal?.[0]">↓</div>-->
      </div>
      <div class="w-[223px] h-[6px] bg-[#ECECEC] rounded-[6px] flex relative justify-center ml-[10px] overflow-visible">
        <div class="w-[12px] h-[12px] rounded-[12px] border-[#09CDD5] border-[3px] bg-[#fff] absolute top-[-3px]" :style="{
          borderColor: data.bmi < data.bmi_normal?.[0] ? '#3786FD' : data.bmi > data.bmi_normal?.[1] ? '#FB2D19' : '#09CDD5',
          left: `${left1}%`
        }"></div>
        <div class="w-[94px] h-[6px] bg-[#09CDD5] overflow-visible">
          <div style="transform: translateY(-15px)" class="overflow-visible flex justify-between">
            <div class="text-[#808080] text-[12px] overflow-visible ml-[-10px]">{{ data.bmi_normal?.[0] }}</div>
            <div class="text-[#808080] text-[12px] overflow-visible mr-[-10px]">{{ data.bmi_normal?.[1] }}</div>
          </div>
          <div class="text-[#09CDD5] text-[12px] mt-[-10px] ml-[16px]">正常BMI范围</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg{
  background: url("@/assets/img/icon/bg_grxx.png") 0 0 / 100% 100% no-repeat;
}

.bg1{
  background: url("@/assets/img/icon/bg_kuang.png") 0 0 / 100% 100% no-repeat;
}
</style>
